{dialog.object}showWaitMessage Method

Syntax

{dialog.Object}.showWaitMessage(UXWaitMessageTarget [,optionsObject])

Arguments

UXWaitMessageTarget

The type of wait message to show. This can be set to:

Wait Message Target: Description
"page": The entire screen is locked, and the message is centered on the screen.
"container:containerId": The message is shown over the container with the id containerId.
"panel:panelId": The message is shown over the Panel with the id panelId.
"element:elementId": the message is shown over an element (e.g. div) with the id elementId.

optionsObject

An optional parameter that allows you to control the appearance of the wait window. The following options are available:

iconstring

Defaults to the built-in wait image. A relative or absolute URL specifying the image to display in the wait message. Set to an empty string for no image.

lockClassNamestring

Default = _a5LockScreenCSS. One or more class names to apply to the lock screen overlay. If blank, uses default value.

messagestring

A message to display shown to the right of the icon. The message can contain HTML.

msgClassNamestring

Default = _a5WaitMessageCSS. One or more class names to apply to the wait message. If blank, uses default value.

waitMessageAutoCloseDelaynumber

Default = 5000. Amount of time in milliseconds to wait before automatically closing the message.

useCSSAnimationboolean

Default = false. Indicates whether or not a CSS animation should be used.

cssAnimationSettingsobject

An object containing settings to customize the size, color, and duration of the CSS animation. The following options are available:

autoColorboolean

If true, automatically sets the stroke and shadow color. Colors are determined by the windowTheme.

windowThemestring

Used to determine the stroke and shadow color when autoColor is true. Can be the following values:

Value: Description
"iOS": Sets strokeColor to "#fff" and shadowColor to "#eee".
All other values: Sets strokeColor to "#333" and shadowColor to "#aaa".

strokeColorstring

Default = "#fff". A CSS color value defining the stroke color. This property is ignored if autoColor is set to true.

shadowColorstring

Default = "#eee". A CSS color value defining the shadow color. This property is ignored if autoColor is set to true.

strokeWidthnumber

Default = 6. The width of the stroke in pixels.

cycleTimenumber

Default = 1. The animation cycle time in seconds. A smaller value results in a faster animation. A larger value creates a slower animation.

sizenumber

Default = 32. The size in pixels of the animation.

Description

Displays a wait message.

Discussion

Displays a 'wait...' message over the specified target. The specified target is also 'locked' so that the user cannot interact with controls (for example click a button) that are in specified target. This method is often used at the start of an Ajax callback. When the callback is complete, the .hideWaitMessage() method is called.

You can have multiple wait messages displayed at the same time, each locking a different section of the screen.

Two types of wait windows can be created. You can use an animated gif, or you can use CSS3 transformations in place of an animated gif.

Example

//display a wait message over 'CONAINER_1' and also lock the contents of 'CONTAINER_1'
{dialog.object}.showWaitMessage('container:CONTAINER_1');

//add some custom text to the wait message
var wo = {};
wo.message = 'Saving...';
{dialog.object}.showWaitMessage('container:CONTAINER_1',wo);

//use a custom gif for the wait message
var wo = {};
wo.icon = 'images/mywaitgif.gif';
{dialog.object}.showWaitMessage('container:CONTAINER_1',wo);

//use css3 animations
var wo = {};
wo.useCSSAnimation = true;
wo.cssAnimationSettings = {};
wo.cssAnimationSettings.size = 16; //set the size of the animation object to 16x16 pixels
{dialog.object}.showWaitMessage('container:CONTAINER_1',wo);